<!-- //会员同步 -->
<template>
	<view>
		<view style="height: 14rpx;background-color: #F3F3F3;"></view>
		<!-- 选项卡 -->
		<view class="title_list">
			<view v-for="(item,index) in title_list" :key='index' :class="{active:ac_index==index}" @click="choose_index(index)">{{item}}</view>
		</view>
		<view style="height: 14rpx;background-color: #F3F3F3;"></view>
		<view v-if='ac_index==0'>
			<view class="cen">
				<u-empty text="没有优惠卷" mode="coupon" icon-size="200"></u-empty>
				<view class="btn" @click="addCoupon()">去新增</view>
			</view>
		</view>
		<view v-if="ac_index == 1">
			<view class="coupon-cens">
				<view class="coupon-cen">
					<view class="coupon-left">
						<view class="coup">
							<view class="price">￥10</view>
							<view class="price_choose">满100元使用</view>
						</view>
					</view>
					<view class="coupon-con">
						<view class="coupon-text1">洗剪吹优惠卷</view>
						<view class="coupon-text2">领券当日生效，生效起180天内可用</view>
						<view class="coupon-text3">已领取：0张 剩余：1000张</view>
					</view>
					<view class="coupon-right">
						<text>领取</text>
					</view>

				</view>
				<view style="display: flex;padding: 15rpx; font-size: 24rpx;">
					<view>编辑</view>
					<view>停止发放</view>
					<view>立即发放</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title_list: ['未开始', '进行中', '已结束'],
				ac_index: 0
			}
		},

		methods: {
			choose_index(index) {
				this.ac_index = index
			},
			addCoupon() {
				uni.navigateTo({
					url: './addcoupon'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.title_list {
		padding: 30rpx 24rpx;
		display: flex;
		justify-content: space-between;
		background: white;
		padding-bottom: 0;

		view {
			padding-bottom: 28rpx;
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8E8E8E;
		}

		.active {
			font-size: 30rpx !important;
			font-family: PingFang;
			font-weight: bold !important;
			color: #00C6C2 !important;
			border-bottom: 6rpx solid #00C6C2;
		}
	}

	.cen {
		padding: 30% 20%;
	}

	.btn {

		margin: 20rpx auto;
		width: 267rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: 1rpx solid #00C6C2;
		border-radius: 4rpx;
		font-size: 34rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #00C6C2;

	}

	.coupon-cens {
		padding: 0 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.coupon-cen {
			display: flex;
			padding: 25rpx 0;


			.coupon-left {
				width: 201rpx;
				height: 120rpx;

				background: #00C6C2;
				border-radius: 4px;
				text-align: center;

				.coup {
					padding: 20rpx 22rpx;

					.price {
						font-size: 36rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #FFFFFF;
					}

					.price_choose {
						font-size: 26rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #FFFFFF;
					}
				}

			}

			.coupon-con {
				// width: 50%;
				margin-left: 10rpx;

				.coupon-text1 {
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #000000;

				}

				.coupon-text2 {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8A8A8A;
					padding: 15rpx 0;
				}

				.coupon-text3 {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8A8A8A;
				}
			}

			.coupon-right {
				// width: 20%;
				margin-left: 40rpx;

				text {				
					display: inline-block;													
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #8A8A8A;
				}
			}
		}
	}
</style>
